<template>
	<view class="upicker">
		<u-picker 
			:show="showPicker"  
			ref="uPicker" 
			:columns="data" 
			:keyName="keyName"
			:closeOnClickOverlay="closeOnClickOverlay"
			:title="title"
			@confirm="confirm" 
			@cancel="cancel"
			@change="changeHandler"
			@close="close">
		</u-picker>
	</view>
</template>

<script>
	export default{
		props: {
			showPicker: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Array,
				default: () => []
			},
			columnData: {
				type: Array,
				default: () => []
			},
			closeOnClickOverlay: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "",
			},
			keyName: {
				type: String,
				default: "text"
			}
		},
		/*
			props 
				showPicker  是否显示 u-picker
				data     数据源
				columnData  要联动的数据
				keyName     指定数据中要显示的label
				closeOnClickOverlay   是否允许点击遮罩关闭选择器
				title       标题
				
				@confirm    点击确定触发
				@cancel     点击取消触发
				@change     值改变触发
				@close      点击遮罩层触发的回调
		*/
		data() {
			return {

			}
		},
		methods:{
			confirm(e){
				this.$emit("confirm", false,e)
			},
			
			cancel(){
				this.$emit("cancel", false)
			},
			
			close(){
				this.$emit("close", false)
			},
			
			changeHandler(e) {
				// console.log(e,'eeee',this.columnData)
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if(this.columnData.length !== 0){
					// 当第一列值发生变化时，变化第二列(后一列)对应的选项
					if (columnIndex === 0) {
						// picker为选择器this实例，变化第二列对应的选项
						picker.setColumnValues(1, this.columnData[index])
					}
				}
				
			},
		}
	}
</script>

<style>
</style>
